Front Matter

githubも対応している

gpt-5.icon

「front matter（フロントマター）」とは、**ファイルの先頭に書かれるメタデータ（付加情報）**のことです。主に Markdown ファイルや静的サイトジェネレーター（例：Next.js、Hugo、Gatsby、Jekyll など）で使われます。

🔹 具体的な例

Markdown ファイルの例：

code:markdown

---

title: "はじめての Next.js"

date: "2025-10-19"

draft: false

---

この記事では Next.js の基本を紹介します。

🔹 役割

フロントマターは、ファイルの本文（コンテンツ）とは別に「設定情報」や「メタデータ」を持たせるために使われます。

たとえば：

table:_

フィールド 意味

🔹 よく使われる場所

静的サイトジェネレーター

→ ページや記事の情報を front matter から読み取り、自動的に HTML を生成します。

ドキュメンテーションサイト（例: Docusaurus, Astro, Next.js Docsなど）

→ サイドバーのタイトルやメタ情報を front matter で制御。

ブログ機能付きの CMS（例: Contentlayer, Sanity, MDX）

→ Markdown＋front matter の構成で投稿データを管理。

🔹 形式

code:yaml

---

title: "記事タイトル"

---

code:toml

+++

title = "記事タイトル"

+++

code:json

{

"title": "記事タイトル"

}

🔹 Next.js の例（MDX + Contentlayer）

Next.js でブログ機能を作るときなどは、front matter から記事の一覧を生成します：

code:tsx

export async function getStaticProps({ params }) {

const post = getPostBySlug(params.slug);

return { props: { post } };

}

必要なら「front matterをどうパースするか（例: gray-matterの使い方）」も解説できますが、そっちも見たいですか？